H5如何实现唤起APP兼容版，h5跳转app打开或者下载解决方案

2024年01月13日 23:59:13 来源：心里有数-实操笔记

场景1：

在 h5 页面上，不管用户是否安装过该app，都直接跳转到应用市场，让用户从应用市场上打开app。

思路：

这种场景处理比较简单，直接判断判断是android端还是ios端，然后在点击按钮上赋值对应终端的应用市场下载链接就可以了，在微信上打开h5页面时也不用另外处理。跳转之前，系统会默认弹出对话框问是否跳转。

下图以ios端打开淘宝为例：

safari内打开h5页面

微信内打开h5页面

具体实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style type="text/css">
            body{
                padding-top: 30px;
            }
            .open-app {
                margin: 30px;
                border-radius: 5px;
                padding: 10px 20px;
                border: 1px solid #ccc;
            }
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
 
        <a class="open-app">click me to store</a>
        
        <script type="text/javascript">
 
            var iosLinkUrl = "http://apps.apple.com/cn/app/id387682726" // 淘宝 app store 下载地址
            var androidLinkurl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient" //(找不到淘宝应用宝地址，这里以lucky coffee为例)
 
            var u = navigator.userAgent, isAndroid, isIOS
 
            window.onload = function() {
                init()
            }
 
            function init() {
                isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 
                var link = isIOS ? iosLinkUrl : androidLinkurl
 
                $('a').attr('href', link)
            }
            
        </script>
    </body>
</html>

场景2：

在 h5 页面上，用户点击打开app按钮，在用户手机上已经安装了App时，打开app，否则就引导用户前往应用市场。这样就方便了用户，而且在业务需要情况下，可以跳转到app指定页面和传参。

思路：

在 h5 页面上唤醒app ，需要用到 scheme协议（由app端小伙伴提供，关于什么是scheme文末补充），但是在微信浏览器里scheme不起作用，有没有印象有时在微信上打开的一些需要跳转到app的操作时，会提示在浏览器上打开，就是这个原因。

所以需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后做相应的处理。

以打开淘宝为例：

具体实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style type="text/css">
            body{
                padding-top: 30px;
            }
            .open-app {
                margin: 30px;
                border-radius: 5px;
                padding: 10px 20px;
                border: 1px solid #ccc;
            }
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        
        <a class="open-app">click me to app</a>
        
        <script type="text/javascript">
 
            $('a').click(function() {
                var u = navigator.userAgent;
                var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 
                // 微信内
                if(isWeixin) {
                    alert('请在浏览器上打开')
                } else {
                    //android端
                    if (isAndroid) {
                        //安卓app的scheme协议
                        window.location.href = 'taobao://';
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
                            if(typeof hidden =="undefined" || hidden ==false){
                                //应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
                                window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
                            }
                        }, 2000);
                    }
                    //ios端
                    if (isIOS) {
                        //ios的scheme协议
                        window.location.href = 'taobao://'
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
                            if(typeof hidden =="undefined" || hidden ==false){
                                //App store下载地址
                                window.location.href = "http://itunes.apple.com/app/id387682726";
                            }
                        }, 2000);
                    }
                }
                
            });
        </script>
    </body>
</html>

如果能检测到 scheme 就跳转到协议 'taobao://'，即打开app；

如果2秒后还没有唤醒 'taobao://'，那么就认为该设备上没有安装淘宝app，即跳转到应用市场。

这里选择直接新开窗口来打开链接，或者也可以用到 iframe 框架来打开链接，但是 IOS9屏蔽了 iframe这个标签。

在移动端开发中，H5页面唤起本地APP是一个非常常见的需求。本文将介绍如何在H5页面中实现唤起本地APP的具体操作。

常见的唤起APP方式

URL Scheme

URL Scheme是一种特殊的URL协议，可以在URL中携带参数，通过调用该URL来唤起本地APP。例如，微信的URL Scheme为weixin://，支付宝的URL Scheme为alipay://。

唤起APP的实现方式是在H5页面中通过JavaScript代码拼接出唤起APP的URL，并将该URL作为链接或按钮的href属性值或JavaScript事件绑定中的location.href赋值即可实现。

<!-- 通过链接方式唤起APP -->
<a href="weixin://">打开微信</a>
<!-- 通过绑定事件方式唤起APP -->
<button onclick="location.href='weixin://'">打开微信</button>

以下是一些国内常见的URL Scheme：

微信 weixin://

支付宝 alipay://

淘宝 tbopen://

美团 imeituan://

大众点评 dianping://

京东 openApp.jdMobile://

饿了么 eleme://

滴滴出行 diditaxi://

唯品会 vipshop://

豆瓣 douban://

网易云音乐 orpheus://

知乎 zhihu://

新浪微博 sinaweibo://

QQ mqq://

需要注意的是，不同的版本和不同的应用可能会有不同的URL

Scheme，需要根据实际情况进行调整。

Universal Link

Universal Link是一种苹果公司提供的新的URL协议，它能够在URL中携带参数，并且具有更好的用户体验。与URL Scheme不同的是，Universal Link是由苹果公司提供的服务，需要在APP中进行相应的配置才能生效。唤起APP的实现方式与URL Scheme类似，只需要将Universal Link作为链接或按钮的href属性值或JavaScript事件绑定中的location.href赋值即可实现。

<!-- 通过链接方式唤起APP -->
<a href="https://example.com/apple-app-site-association">打开APP</a>
<!-- 通过绑定事件方式唤起APP -->
<button onclick="location.href='https://example.com/apple-app-site-association'">打开APP</button>

Schemaless

Schemaless是一种不需要特定的URL协议即可实现唤起APP的方式。它可以通过在H5页面中进行JavaScript代码编写，实现通过APP的包名或应用名称来唤起APP。

// 通过包名方式唤起APP
window.location.href = 'intent://example.com#Intent;scheme=example;package=com.example;end';
// 通过应用名称方式唤起APP
window.location.href = 'intent://example.com#Intent;scheme=example;package=com.example;end';

App link

用于替代传统的URL Scheme。与URL Scheme不同的是，App link不需要在应用内注册，也不需要担心链接被其他应用占用的问题。以下是一个简单的App link示例：

https://www.example.com/path/to/content?param1=value1&param2=value2#target

其中，https代表使用的协议，www.example.com代表应用的域名，path/to/content代表应用内的页面路径，param1=value1¶m2=value2代表传递的参数，target代表跳转到的锚点。使用App link方式打开链接时，系统会先尝试在应用内打开链接，如果应用不存在或者应用内无法处理该链接，则会尝试在浏览器中打开链接。为了让应用支持App link，需要在应用的AndroidManifest.xml或者Info.plist文件中添加相应的配置。例如，在AndroidManifest.xml文件中，可以添加以下代码：

<activity
    android:name=".MainActivity"
    android:label="@string/app_name">
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="www.example.com"
            android:pathPrefix="/path/to/content"
            android:scheme="https" />
    </intent-filter>
</activity>

其中，autoVerify="true"表示使用自动验证方式，可以让应用自动进行验证，无需进行手动验证。android:host代表应用的域名，android:pathPrefix代表应用内的页面路径，android:scheme代表使用的协议。在这个例子中，当打开https://www.example.com/path/to/content链接时，系统会尝试在应用内打开链接。

需要注意的是，使用App link方式打开链接需要系统支持，目前仅在Android 6.0及以上的系统中支持。在低版本的系统中，仍需要使用URL Scheme方式打开链接。

唤起APP的注意事项

唤起APP不是在所有情况下都有效的，需要注意以下几点：

仅限于移动端使用。

URL Scheme或Universal Link需要在本地APP中进行相应的配置才能生效。

不同的浏览器对唤起APP的方式支持情况不同，需要进行相应的兼容性处理。

如果用户没有安装对应的APP，则唤起操作将无效，需要对此情况进行相应的处理。

不同的浏览器对唤起APP的方式支持情况不同,以下是一个兼容性较好的openApp函数，同时支持设置超时时间和唤起失败后的处理方式。

function openApp(schemeUrl, timeout, failCallback) {
  var ua = navigator.userAgent.toLowerCase();
  var startTime = Date.now();
  var iframe;
  var timer;
  // 微信浏览器，采用JSAPI方式唤起微信APP
  if (ua.indexOf('micromessenger') !== -1) {
    if (typeof WeixinJSBridge === 'undefined') {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', function() {
          WeixinJSBridge.invoke('launchApplication', {
            'schemeUrl': schemeUrl
          }, function(res) {});
        }, false);
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', function() {
          WeixinJSBridge.invoke('launchApplication', {
            'schemeUrl': schemeUrl
          }, function(res) {});
        });
        document.attachEvent('onWeixinJSBridgeReady', function() {
          WeixinJSBridge.invoke('launchApplication', {
            'schemeUrl': schemeUrl
          }, function(res) {});
        });
      }
    } else {
      WeixinJSBridge.invoke('launchApplication', {
        'schemeUrl': schemeUrl
      }, function(res) {});
    }
  } else {
    // 其他浏览器，采用URL Scheme方式唤起APP
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = schemeUrl;
    document.body.appendChild(iframe);
  }
  timer = setTimeout(function() {
    var endTime = Date.now();
    if (endTime - startTime < timeout + 200) {
      // APP未唤起，执行失败回调函数
      failCallback && failCallback();
    }
  }, timeout);
  window.onblur = function() {
    clearTimeout(timer);
  };
  window.onfocus = function() {
    clearTimeout(timer);
  };
}

使用方式：

openApp('weixin://', 2000, function() {
  // 唤起失败，执行处理逻辑
});

其中，schemeUrl为唤起链接，timeout为超时时间，failCallback为唤起失败后的处理函数。需要注意的是，微信浏览器不支持iframe方式唤起APP，如果需要在微信浏览器中唤起APP，需要使用JSAPI方式。

当用户没有安装对应的APP时，唤起失败时，我们可以通过以下几种方式处理：

提示用户下载安装APP。

可以在唤起链接或按钮的点击事件中加入一个判断，如果唤起失败，则弹出提示框，提示用户下载安装对应的APP。

function openApp() {
  window.location.href = 'weixin://';
  setTimeout(function() {
    if (document.hidden || document.webkitHidden) {
      // 唤起失败，提示用户下载安装APP
      alert('请下载安装对应的APP');
    }
  }, 2000);  // 设置一个2秒的定时器，判断是否唤起成功
}

跳转到APP下载页面。可以在H5页面中添加一个下载APP的按钮，点击该按钮时跳转到APP下载页面。

<a href="https://example.com/download">下载APP</a>

提供选择性跳转到H5页面的选项。

可以在唤起链接或按钮的点击事件中加入一个判断，如果唤起失败，则提供一个跳转到H5页面的选项。

function openApp() {
  window.location.href = 'weixin://';
  setTimeout(function() {
    if (document.hidden || document.webkitHidden) {
      // 唤起失败，提供跳转到H5页面的选项
      if (confirm('未检测到对应的APP，是否跳转到H5页面？')) {
        window.location.href = 'https://example.com';
      }
    }
  }, 2000);  // 设置一个2秒的定时器，判断是否唤起成功
}

h5端调起app

以上都是 app 端要做的事情，那么 h5 端要做什么调起 app 呢？

有好几种，比如下面的 a 标签，iframe 之类的，npm 上 callapp-lib 包兼容了这些，我们可以直接用。

H5利用callapp-lib 包调起 app方式：

<template>
  <div @click="goDownload">
    <img class="bgImg" src="~/assets/img/bg.png" alt="" />
    <img v-if="userAgent.isWechat" class="chickImg" src="~/assets/img/chick.png" alt="" />
  </div>
</template>
<script>
import CallApp from 'callapp-lib'
export default {
  computed: {
    userAgent() {
      return this.$store.getters.userAgent
    }
  },
  mounted() {
    if (!this.userAgent.isWechat) {
      this.openApp(this.$route.query)
    }
  },
  methods: {
    openApp(url) {
      const options = {
        scheme: {
          protocol: 'kccatalog'
        },
        intent: {
          package: '',
          scheme: ''
        },
        appstore: '填写appstore的下载地址',
        yingyongbao: '填写应用宝的下载地址',
        fallback: '填写唤端失败后跳转的地址。'
      }
      const callLib = new CallApp(options)
 
      callLib.open({
        param: url.param,
        path: url.path
      })
    },
    goDownload() {
      window.location.href = '没有自动唤端的话,证明手机里面没有app, 点击页面上任意一个地方直接跳应用宝下载链接, 微信不会拦截支付宝的链接'
    }
  }
}
</script>

以上是常见的处理方式，可以根据具体的需求选择合适的处理方式。

总结

以上就是H5实现唤起APP的具体操作。在实际开发中，需要根据具体的场景选择合适的唤起方式，并进行相应的兼容性处理和错误处理。

本文标题：H5如何实现唤起APP兼容版，h5跳转app打开或者下载解决方案(http://www.tianwenhai.com/p3020.html)

标签：

心里有数-实操笔记相关文章

CRM客户关系管理系统报错问题汇总（FACRM）

2024/04/09心里有数-实操笔记热度(38)

facrmCRM客户关系管理系统报错问题:1、“网络请求出错”主要是因为redis队列问题。“网络请求出错”解决方法如下：1、安装php7.4以上版本的php版本，然后安装扩展“redis”，如下图：2、安装redis队列软件，如下图：...
AI智能名片系统

2024/03/03心里有数-实操笔记热度(50)

AI智能名片系统功能特性一、人脉1、创建名片默认推送到人脉，可通过名片行业标签、职位、姓名搜索名片，快速获取销售线索；2、管理员可在后台设置是否推荐名片二、创建名片可在小程序端快速创建名片，可设置名片电话号码、微信号、二维码、推送到人脉等三、创建微官网可在小程序端快速创建微官网、企业图片、企业文字描述等四、创建产品可在小程序端快速创建产品，不限制数量五、创建案例可在小程序端快速创建成功案例，不限制数量六、创建相册可在小程序端快速创建相册...
企业网站开发：iframe嵌入自适应模板，使电脑与移动手机端都正常显示方法（插入优酷视频为例）

2024/02/02心里有数-实操笔记热度(53)

iframe嵌入自适应模板，使电脑与移动手机端都正常显示方法（插入优酷视频为例）iframe嵌入通用代码，在PC上显示正常，但是在手机端的尺寸有问题，视频太宽以至于显示不全！问题原因：如上图，通用代码里默认使用了height=498width=510的高和宽固定尺寸，这时候视频的尺寸优先执行iframe里的高宽，导致PC正常，手机端视频溢出！解决办法：首先，使用通用代码的时候，复制代码后，要去除代码中的高宽属性，直接删除height=...
企业网站开发：通用自适应幻灯片、轮播图代码

2024/02/02心里有数-实操笔记热度(45)

来源：https://www.swiper.com.cn/demo/index.html1、分页器轮播图代码<!DOCTYPE html> <html lang="en"> <head> <meta&nbs...
H5如何实现唤起APP兼容版，h5跳转app打开或者下载解决方案

2024/01/13心里有数-实操笔记热度(112)

场景1：在h5页面上，不管用户是否安装过该app，都直接跳转到应用市场，让用户从应用市场上打开app。思路：这种场景处理比较简单，直接判断判断是android端还是ios端，然后在点击按钮上赋值对应终端的应用市场下载链接就可以了，在微信上打开h5页面时也不用另外处理。跳转之前，系统会默认弹出对话框问是否跳转。下图以ios端打开淘宝为例：safari内打开h5页面微信内打开h5页面具体实现：<!DOCTYPE ht...
企业网站开发：引用第三方ico小图标方法

2024/01/12心里有数-实操笔记热度(55)

将要引用的第三方ico小图标CDN资源地址放在网页头部head内，如下代码：<link href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />然后打开网址：https://www.thinkcmf.com/font/search/...
企业网站开发：网站防扒技巧

2023/12/30心里有数-实操笔记热度(63)

经常我们会发现，我们辛苦搞出来的网站，被别人看上了，扒拉了代码。所以我们就得用到防扒技巧。下面分享的这个方法相当的硬核，当浏览器判断到有人通过F12或者审查元素的行为，浏览器将自动执行关闭当前窗口的行为，并跳转置空白页。具体代码如下：<script type="text/javascript"> //判断F12审查元素 ...
企业网站开发：热门文章、随机文章、随机标签、热评文章通用代码

2023/12/17心里有数-实操笔记热度(147)

方法一：在include.php中添加，注意修改主题idfunction 主题ID_GetArticleCategorys($Rows,$CategoryID,$hassubcate){global $zbp;$ids = strpos($CategoryID,',') !== false ? explode(',',...
开纸质发票的实操教程

2023/12/15心里有数-实操笔记热度(85)

...
AI文章自动化推广系统：首尾段落模版

2023/12/14心里有数-实操笔记热度(75)

在AI自动化生成的过程中，经常需要让AI生成不同的文章开头和结尾，所以就需要给AI文章自动化推广系统内置很多不同的首尾段落模版，便于AI应用，为此特别整理了以下参考模版。模板一：最近很多客户问{输入关键词}，以及{联想词}，所以今天给各位分享{输入关键词}的知识，其中也会对{联想词}进行解释，如果能碰巧解决你现在面临的问题，希望可以对你有所帮助，现在开始吧！模板二：{输入关键词}推荐田文海博客，田文海(tianwenhia.com)专注...
AI文章自动化推广系统：文本过滤清洗词库

2023/12/14心里有数-实操笔记热度(79)

现在各大平台都开始在打击AI自动化推广系统生成的AI内容了，所以为了更好的提升AI自动化的推广优化效果，特别更新了这个“文本过滤清洗词库”：首先，<=>然而，<=>本文，<=>总结，<=>总结：<=>总结归纳，<=>概述，<=>其次，<=>首先，<=>最后，<=>因此，<=...
WPS打印时固定表头指定行出现在每页如何设置

2023/12/08心里有数-实操笔记热度(139)

WPS打印时固定表头指定行出现在每页如何设置您可以点击程序上方“页面布局-打印标题”操作打印。...